import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Modal } from 'antd';
import type { FormInstance } from 'antd/lib/form/Form';
import { useRef } from 'react';
import { PositionItem, UpdatePositionBean } from '../../Position/data';

interface UpdatePositionProps {
    position: PositionItem;
    onSubmit: (values: UpdatePositionBean) => Promise<void>;
    onCancel: (flag?: boolean) => void;
    modalVisible: boolean;
    visibleHandler: (flag?: boolean) => void;
}
export default (props: UpdatePositionProps) => {
    const {
        onSubmit: handleUpdate,
        onCancel: handleUpdateModalVisible,
        modalVisible: updateModalVisible,
        position,
    } = props;
    const formRef = useRef<FormInstance>();

    return (
        <Modal
            title="修改职位"
            open={updateModalVisible}
            width={550}
            footer={null}
            centered
            onCancel={() => handleUpdateModalVisible(false)}
            afterClose={() => handleUpdateModalVisible(false)}
        >
            <ProForm<UpdatePositionBean>
                onFinish={(values) => handleUpdate(values)}
                formRef={formRef}
                layout="vertical"
            >
                <ProFormText
                    width={'xl'}
                    name="id"
                    label="id"
                    initialValue={position.id}
                    hidden={true}
                />

                <ProFormText
                    width={'xl'}
                    name="name"
                    label="职位名称"
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入职位名称' }]}
                    initialValue={position.name}
                />
            </ProForm>
        </Modal>
    );
};
